<template>
  <view class="chat-container">
    <!-- 顶部说明区 -->
    <view class="header">
      <view class="header-content">
        <text class="header-title">校园百事通</text>
        <text class="header-desc">智能问答助手，解答校园生活各类问题</text>
      </view>
    </view>

    <!-- 聊天内容区 -->
    <scroll-view
      scroll-y
      class="chat-scroll"
      :scroll-into-view="scrollToView"
      :scroll-with-animation="true"
      :show-scrollbar="false"
      :enhanced="true"
      :bounces="true"
    >
      <view class="chat-content">
        <view class="welcome-tip" v-if="messages.length === 0">
          <view class="welcome-card">
            <text class="welcome-title">校园百事通</text>
            <text class="welcome-text">你好！我是你的AI助手，有什么可以帮你的吗？</text>
          </view>
        </view>
        <view
          v-for="(msg, index) in messages"
          :key="index"
          :id="'msg-' + index"
          :class="['chat-item', msg.role]"
        >
          <view class="bubble">
            <text>{{ msg.content || (msg.role === 'ai' ? 'AI 正在思考中...' : '') }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 输入区 -->
    <view class="input-wrapper">
      <view class="input-inner">
        <input
          v-model="userInput"
          class="input"
          placeholder="请输入你想问的内容..."
          confirm-type="send"
          @confirm="sendMessage"
        />
        <button class="send-btn" @tap="sendMessage">发送</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInput: '',
      messages: [],
      scrollToView: '',
      eventSource: null
    };
  },
  methods: {
    sendMessage() {
      const text = this.userInput.trim();
      if (!text) return;

      this.messages.push({ role: 'user', content: text });
      this.userInput = '';

      const aiIndex = this.messages.length;
      this.messages.push({ role: 'ai', content: '' });

      this.$nextTick(() => {
        this.scrollToBottom();
      });

      this.startSSE(text, aiIndex);
    },
    scrollToBottom() {
      const index = this.messages.length - 1;
      this.scrollToView = `msg-${index}`;
      // 使用延时确保内容渲染完成后再滚动
      setTimeout(() => {
        this.scrollToView = `msg-${index}`;
      }, 100);
    },
    startSSE(prompt, aiIndex) {
      const url = `http://localhost:8081/rag?message=${encodeURIComponent(prompt)}`;
      if (this.eventSource) {
        this.eventSource.close();
      }

      this.eventSource = new EventSource(url);

      this.eventSource.onmessage = (event) => {
        if (event.data !== '[DONE]') {
          this.messages[aiIndex].content += event.data;
          this.$nextTick(() => {
            this.scrollToBottom();
          });
        } else {
          this.eventSource.close();
        }
      };

      this.eventSource.onerror = () => {
        this.eventSource.close();
      };
    }
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8fafc;
  position: relative;
}

/* 顶部说明区 */
.header {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  padding: 24rpx;
  color: white;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 600rpx;
  margin: 0 auto;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 8rpx;
}

.header-desc {
  font-size: 24rpx;
  opacity: 0.9;
  display: block;
}

/* 聊天区域 */
.chat-scroll {
  flex: 1;
  height: calc(100vh - 280rpx); /* 调整高度，为顶部说明区留出空间 */
}

.chat-content {
  padding: 12rpx 24rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.welcome-tip {
  display: flex;
  justify-content: center;
  padding: 20rpx 24rpx;
  flex-shrink: 0;
}

.welcome-card {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 24rpx;
  padding: 32rpx;
  width: 100%;
  max-width: 600rpx;
  box-shadow: 0 4rpx 20rpx rgba(59, 130, 246, 0.2);
}

.chat-item {
  display: flex;
  margin-bottom: 24rpx;
  animation: fadeIn 0.3s ease;
  min-height: 60rpx;
  flex-shrink: 0;
}

.chat-item:first-child {
  margin-top: 12rpx;
}

.chat-item:last-child {
  margin-bottom: 120rpx;
}

.chat-item.user {
  justify-content: flex-end;
}

.bubble {
  max-width: 75%;
  padding: 24rpx 32rpx;
  font-size: 28rpx;
  line-height: 1.6;
  word-break: break-word;
  position: relative;
  min-height: 40rpx;
  display: flex;
  align-items: center;
}

.chat-item.user .bubble {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border-radius: 24rpx 24rpx 4rpx 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.2);
}

.chat-item.ai .bubble {
  background-color: white;
  color: #1e293b;
  border-radius: 24rpx 24rpx 24rpx 4rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 输入栏 */
.input-wrapper {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  right: 0;
  padding: 16rpx 24rpx;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10rpx);
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.input-inner {
  display: flex;
  align-items: center;
  background-color: #f1f5f9;
  border-radius: 20rpx;
  padding: 8rpx 16rpx;
  border: 1px solid #e2e8f0;
}

.input {
  flex: 1;
  font-size: 28rpx;
  padding: 16rpx;
  background-color: transparent;
  border: none;
}

.send-btn {
  margin-left: 16rpx;
  padding: 0 32rpx;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 28rpx;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border-radius: 16rpx;
  font-weight: 500;
  transition: all 0.2s ease;
}

.send-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
